<template>
  <view>
    <!--#ifdef APP-PLUS-->
    <view class="lz-status_bar">
      <view class="lz-top_view"></view>
    </view>
    <!--#endif-->
    <!-- #ifndef MP-WEIXIN -->
    <view class="kaoshi-head">
      <view class="kaoshi-head-top">
        <view class="kaoshi-head-left" @tap="$navigateBack">
          <view class="iconfont icon-zuojiantou"></view>
        </view>
        <view class="kaoshi-head-m">{{name}}</view>
      </view>
    </view>
    <!--#endif-->
    <view class="kaoshi-tiku">
      <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
        <block v-for="(item, index) in list"
               :key="index">
          <view class="kaoshi-tiku-content" @tap="goto_detail(item)">
            <view class="pub-flex-1">
              <view class="kaoshi-tiku-content-flex">
                <view class="kaoshi-tiku-content-top">{{item.name}}</view>
                <view class="kaoshi-tiku-bilv">{{item.scale.toFixed(0)}}
                  <view class="kaoshi-remind-title">%</view>
                </view>
              </view>
              <view class="kaoshi-tiku-content-flex">
                <view class="kaoshi-tiku-content-bottom">
                  <view class="iconfont icon-dui2"></view>
                  <view class="pub-gray">已答题{{item.test_num}}/{{item.total_num}}</view>
                </view>
                <view class="pub-gray">正确率</view>
              </view>
            </view>
            <view class="iconfont icon-arrow"></view>
          </view>
        </block>
      </mescroll-body>
    </view>
  </view>
</template>

<script>
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import { mapState } from "vuex";
import noRecode from "@/components/no-recode.vue";
import Error from '@/core/untils/error/index';

export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        page: {
          num:0,
          size: 10 // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          tip: '暂无相关数据'
        }
      },
      // 列表数据
      list:[],

      pages_params: {
        // dotype: '' 'zhangjie 章节', 'moni模拟', 'yicuo易错', 'cuoti错题', 'vip答题'
      },
      type: '',
      name: '',
      id: '',
      //通过step确定当前页面层次，用于后退时逐层退出
      step:0,
      arr:[],
    };
  },
  onLoad(opts) {
    this.pages_params = opts
    if(opts && opts.from_type){
      this.type = opts.from_type
      this.name = opts.name
      this.id = opts.id
    }
    this.arr[0] = 0;
  },
  onShow() {
    if(this.type != ''){
      // this.getList()
      this.arr[this.step]=(this.id)
    }

  },
  mounted() {},
  computed: {
    ...mapState(["subject", "userinfo"]),
  },
  components: {
  },
  onBackPress() {
//逐层退出
    if(this.step == 0){
      this.id=this.pages_params.id
      this.mescroll.resetUpScroll( false )
    }else{
      this.step -=1;
      this.id=this.arr[this.step]
      this.mescroll.resetUpScroll( false )
      return true;
    }
  },
  methods: {
    /*上拉加载的回调*/
    async upCallback(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      let needLogin = false
      if (this.userinfo.token) {
        needLogin = true
      }

      let res = await this.$myHttp.post({
        url: this.type == '1' ? this.$myHttp.urlMap.unitList : this.$myHttp.urlMap.zhentiList,
        data: {
          subject_id: this.subject.id,
          unit_id:this.id,
          page: pageNum,
          limit: pageSize
        },
        needLogin: needLogin
      })
      if(res.code == 1){
        // 接口返回的当前页数据列表 (数组)
        let curPageData = res.data.data;
        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
        let curPageLen = curPageData.length;
        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
        // let totalPage = data.xxx;
        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
        let totalSize = res.data.total;

        this.mescroll.endBySize(curPageLen, totalSize);
        if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(curPageData); //追加新数据
      }else{
        this.mescroll.endErr()
      }
      // 此处仍可以继续写其他接口请求...
      // 调用其他方法...
    },
    // async getList() {
    //   let needLogin = false
    //   if (this.userinfo.token) {
    //     needLogin = true
    //   }
	// 		let data = {
    //           subject_id: this.subject.id,
    //           unit_id:this.id,
    //           page:1,
    //           limit:0
	// 		}
    //   let res = await this.$myHttp.post({
    //     url: this.type == '1' ? this.$myHttp.urlMap.unitList : this.$myHttp.urlMap.zhentiList,
    //     data: data,
    //     needLogin: needLogin
    //   });
    //   if (res.code === 1) {
    //     this.list = res.data.data;
    //   }
    // },
    goto_detail(item) {
      if(this.$myUserLogin.getToken()){
        if(item.is_last == 0){
          //非终极栏目，点击进入下级栏目
          this.step +=1;
          this.arr[this.step]=(item.id)
          this.id = item.id
          this.name = item.name
          this.mescroll.resetUpScroll( false )
        }else if(item.is_last == 1){
          //终极栏目，点击进入答题页
          this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this.type + '&name=' + item.name)
        }
      }else{
        Error.errorNotLoggedIn();
      }
    }
  }
};
</script>

<style>
page {
  background: #f6f7f9;
}
/*题库列表*/
.kaoshi-tiku {
  background: #fff;
}
.kaoshi-tiku-content {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  padding: 14px 0;
  border-bottom: solid 1px #f5f5f5;
}
.kaoshi-tiku-content-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kaoshi-tiku-content .icon-arrow {
  padding-left: 13px;
  color: #b3b3b3;
}
.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
  padding-bottom: 6px;
}
.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
  font-size: 14px;
}
.kaoshi-tiku-content-top {
  display: flex;
  align-items: center;
}
.kaoshi-tiku-content-top img {
  width: 20px;
  height: 22px;
  margin-right: 10px;
}
.kaoshi-tiku-content-bottom {
  display: flex;
  align-items: center;
}
.kaoshi-tiku-content-flex .icon-dui2 {
  margin: 2px 2px 0 0;
  color: #3c7bfc;
}
.kaoshi-tiku-bilv {
  font-size: 22px;
  color: #000;
  display: flex;
  align-items: baseline;
}
.kaoshi-remind-title {
  font-size: 13px;
  color: #000;
}
</style>
